<!--
 * @Author: your name
 * @Date: 2021-03-12 14:54:21
 * @LastEditTime: 2021-04-10 14:39:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \test\src\components\login\login.vue
-->
<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 登录表单区域 -->
            <div class="login_form">
                <!-- <el-form label-width="0px" ref="loginFormRef" :model="loginForm" :rules="loginFormRules"> -->
                <img src="../../assets/login.png" class="imgLogin">
                <el-form label-width="60px" ref="loginFormRef" :model="loginForm">
                    <!-- 用户名 -->
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="loginForm.userName" prefix-icon="icon iconfont my-iconuser" class="inputLogin"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="loginForm.userPassword" prefix-icon="icon iconfont my-iconPassword" type="password" class="inputLogin"></el-input>
                    </el-form-item>
                    <!-- 按钮 -->
                    <el-form-item class="login_btns">
                        <el-button type="primary" @click="login()" class="loginBtn">登录</el-button>
                        <span class="registerSpan">没有账号请点击</span><el-button type="info" @click="register()">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { userLogin } from '../../api/apply-info'
export default {
  data () {
    return {
      loginForm: { // 登录表单
        userName: '',
        userPassword: ''
      },
      userForm: {
        userId: '',
        userName: ''
      }
    }
  },
  methods: {
    // 点击重置登录表单
    register () {
      this.$router.push({ path: '/register' })
    },
    login () {
      userLogin(this.loginForm).then(res => {
        this.$message(res.data.message)
        console.log(res)
        if (res.data.message === '登录成功') {
          this.userForm = res.data.data.authorities[0].role
          this.userForm.userName = res.data.data.userName
          // 将用户名放入sessionStorage
          sessionStorage.setItem('userName', res.data.data.userName)
          sessionStorage.setItem('role', res.data.data.authorities[0].role.role)
          sessionStorage.setItem('userId', res.data.data.authorities[0].role.userId)
          console.log('111', res.data.data.userName)
          // 将用户放入vuex
          this.$store.dispatch('setUser', res.data.data.userName)
          console.log('login state', this.$store.state.isLogin)
          this.$router.push({ path: '/home' })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login_container{
    background-color: #7196b1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../../assets/bk1.jpeg');
    background-size:100%;
    background-repeat:no-repeat;
    .imgLogin{
      margin-bottom: 20px;
    }
    .login_box{
        width: 450px;
        height: 250px;
        margin-left: 50%;
        background-color: #fff;
        border-radius: 3px;
        position: relative;
        top: 100px;
        .login_form{
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 20px 20px;
            box-sizing: border-box;
            .login_btns{
                .loginBtn{
                  margin-left: -50px;
                  background-color: #71c5ea;
                  border: white;
                }
                .registerSpan{
                  font-size: 10px;
                  margin-left: 165px;
                  margin-right: 10px;
                  color: #71c5ea;
                }
            }
        }
    }
}
</style>
<style>
body{
  background-image: url('../../assets/bg3.jpeg');
  background-size: 100% 1000px;
  background-repeat: no-repeat;
}
.el-icon-switch-button {
  color: #e4252d;
  font-size: 17px;
  font-weight: bolder;
}
</style>
